<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .da {
        width: 600px;
        height: 400px;
        border: 1px solid #000;
    }

    .top {
        border-bottom: 1px solid #000;
    }
</style>

<body>
    <div class="da">
        <div class="top">
            <h1>百度音乐盒</h1>
            <p>
                <button class="bu1">全选</button>
                <button class="bu2">取消</button>
                <button class="bu3">反选</button>
                <button class="bu4">播放</button>
            </p>
        </div>
        <table class="ff">
            <tr>
                <td><input type="checkbox"></td>
                <td class="tt"><span> 爱你一万年</span></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td class="tt"><span>海阔天空</span></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td class="tt"><span>蓝精灵之歌</span></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td class="tt"><span>因为爱情</span></td>
            </tr>
        </table>
    </div>
</body>

</html>
<script>
    var but1 = document.querySelector('.bu1');
    var but2 = document.querySelector('.bu2');
    var but3 = document.querySelector('.bu3');
    var but4 = document.querySelector('.bu4');
    var ff = document.querySelectorAll('input');
    var mm = document.querySelectorAll('.tt')
    var cc = document.querySelectorAll('span')
    but1.onclick = function () {
        var flag = true;
        for (var i = 0; i < ff.length; i++) {
            ff[i].checked = flag;
        }
    }
    but2.onclick = function () {
        flag = false
        for (var i = 0; i < ff.length; i++) {
            ff[i].checked = flag;
        }
    }
    but3.onclick = function () {
        flag = false
        for (var i = 0; i < ff.length; i++) {
            if (ff[i].checked == true) {
                ff[i].checked = false;
            } else {
                ff[i].checked = true;
            }
        }
    }
    but4.onclick = function () {
        var he = ''
        var y = 1
        for (i = 0; i < ff.length; i++) {
            if (ff[i].checked == true) {
                he += '正在播放' + y + mm[i].innerText + '\n';
                y++;
            }
        }
        alert(he)
    }
    for (i = 0; i < ff.length; i++) {
        ff[i].onclick = function () {
            for (var k = 0; k < ff.length; k++) {
                if (ff[k].checked == true) {
                    cc[k].style.color = 'red'
                } else {
                    cc[k].style.color = '#000'
                }
            }
        }
    }
</script>